<template>
  <div class="backColor">
    <div class="header">
      <img src="@/assets/images/return.png" class="header_img" @click="back"/>
      <div class="title">基本信息</div>
      <div class="save" @click="savePinformation">保存</div>
    </div>
    <div class="base_message pd_tb8">
      <div class="base_title">头像</div>
      <div class="img_avatar"><img :src="'api' + image" ref="avatar"/></div>
      <input type="file" class="avatar_file" ref="fileUpload" @change="fileSelected"/>
    </div>
    <div class="base_message" @click="goNiCheng">
      <div class="base_title">昵称</div>
      <div class="base_value">{{nickName ? nickName : '请输入昵称'}}</div>
    </div>
    <div class="base_message">
      <div class="base_title" @click="setSexVisible">性别</div>
      <div class="base_value" @click="setSexVisible">{{sex ? sex : '请输入性别'}}</div>
      <mt-popup v-model="sexVisible" popup-transition="popup-fade" class="borderRadius">
        <div class="sexPopup">
          <div class="sex-text" @click="hideSexVisible('男')">男</div>
          <div class="line"></div>
          <div class="sex-text" @click="hideSexVisible('女')">女</div>
        </div>
      </mt-popup>
    </div>
    <div class="base_message" @click="goAge">
      <div class="base_title">年龄</div>
      <div class="base_value">{{age ? age : '请输入年龄'}}</div>
    </div>
    <div class="base_message">
      <div class="base_title" @click="goWorkTime">工作年限</div>
      <div class="base_value" @click="goWorkTime">{{workLength ? workLength+'年' : '请输入工作年限'}}</div>
    </div>
    <div class="base_message" @click="goDistrict">
      <div class="base_title">地区</div>
      <div class="base_value">{{city? city : '请选择地区'}}</div>
    </div>
    <div class="base_message" @click="goCompany">
      <div class="base_title">公司</div>
      <div class="base_value">{{company ? company : '请输入公司名称'}}</div>
    </div>
    <div class="base_message" @click="goZhiWei">
      <div class="base_title">职位</div>
      <div class="base_value">{{position ? position : '请输入职位名称'}}</div>
    </div>
    <div class="base_message" @click="goZhiYeFX">
      <div class="base_title">职业方向</div>
      <div class="base_value">{{direction ? direction : '请选择职业方向'}}</div>
    </div>
    <div class="base_message">
      <div class="base_title" @click="showStatus">目前状态</div>
      <div class="base_value" @click="showStatus">{{status? status : '请选择目前状态'}}</div>
      <mt-popup v-model="statusVisible" popup-transition="popup-fade" class="borderRadius">
        <div class="sexPopup">
          <div class="sex-text" @click="hideStatus('求职')">求职</div>
          <div class="line"></div>
          <div class="sex-text" @click="hideStatus('自由工作')">自由工作</div>
          <div class="line"></div>
          <div class="sex-text" @click="hideStatus('正常工作')">正常工作</div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'

  export default {
    name: "Pinformation",
    data() {
      return {
        file: null,
        nickName: null,// 昵称
        city: null,// 地区
        company: null,// 公司
        position: null,// 职位
        direction: null,//职业方向
        status: null,// 目前状态
        sex: null,// 性别
        age: null,// 年龄
        workLength: null,// 工作年限
        sexVisible: false,
        statusVisible: false,
      }
    },
    computed: {},
    mounted() {
      this.nickName = this.$store.state.baseInfoMessageAdd.nickName,
      this.age = this.$store.state.baseInfoMessageAdd.age
      this.sex = this.$store.getters.getSex
      this.workLength = this.$store.state.baseInfoMessageAdd.workLength
      this.city = this.$store.state.baseInfoMessageAdd.city
      this.company = this.$store.state.baseInfoMessageAdd.company
      this.position = this.$store.state.baseInfoMessageAdd.position
      this.direction = this.$store.state.baseInfoMessageAdd.directionName
      this.status = this.$store.getters.getStatus
      this.image = this.$store.state.baseInfoMessageAdd.image
    },
    methods: {
      back() {
        this.$store.commit('setPInformationAdd')
        this.$router.back()
      },
      fileSelected() {
        var oFile = this.$refs['fileUpload'].files[0]
        var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i
        var ndata, blob
        if (!rFilter.test(oFile.type)) {
          Toast({
            message: '文件格式必须为图片',
            position: 'middle',
            duration: 1000
          });
        } else {
          /*this.$store.dispatch('action_uploadAvatar',oFile).then()*/
          var reader = new FileReader(), img = new Image()

          reader.readAsDataURL(oFile)
          var self = this
          reader.onload = function (e) {
            img.src = e.target.result
          }
          img.onload = function () {
            // 图片原始尺寸
            var originWidth = this.width
            var originHeight = this.height

            // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
            var maxWidth = $(self.$refs['avatar']).width(), maxHeight = $(self.$refs['avatar']).height()
            // 目标尺寸
            var targetWidth = originWidth, targetHeight = originHeight

            if (originWidth > maxWidth || originHeight > maxHeight) {
              if (originWidth / originHeight > maxWidth / maxHeight) {
                // 更宽，按照宽度限定尺寸
                targetWidth = 100 + '%';
                //宽高比设置为百分比
                targetHeight = (originHeight * maxWidth) / (originWidth * maxHeight) * 100 + '%';
              } else {
                targetHeight = 100 + "%";
                //宽高比设置为百分比
                targetWidth = (originWidth * maxHeight) / (originHeight * maxWidth) * 100 + '%';
              }
              self.$refs['avatar'].src= img.src;
              self.$refs['avatar'].style=`width:${targetWidth};height:${targetHeight}`
            }else{
              self.$refs['avatar'].src= img.src;
              self.$refs['avatar'].style=`width:${targetWidth}px;height:${targetHeight}px`
            }
          }
          this.$store.commit('setAvatar',oFile)
        }
      },
      convertBase64UrlToBlob(urlData, type){
        var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
        //处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i);
        }
        return new Blob( [ab] , {type : type});
      },
      savePinformation() {
        this.$store.dispatch('action_updatePInformation').then()
        this.$router.back()
      },
      setSexVisible() {
        this.sexVisible = true
      },
      hideSexVisible(sex) {
        this.sex = sex
        this.$store.commit('setSex', this.sex)
        this.sexVisible = false
      },
      showStatus() {
        this.statusVisible = true
      },
      hideStatus(status) {
        this.status = status
        this.$store.commit('setStatus', this.status)
        this.statusVisible = false
      },
      goNiCheng() {
        this.$router.push('/NiCheng')
      },
      goDistrict() {
        this.$router.push('/District')
      },
      goCompany() {
        this.$router.push('/Company')
      },
      goZhiWei() {
        this.$router.push('/ZhiWei')
      },
      goZhiYeFX() {
        this.$router.push('/ZhiYeFX')
      },
      goWorkTime() {
        this.$router.push('/WorkTime')
      },
      goAge() {
        this.$router.push('/Age')
      }
    }
  }
</script>

<style scoped>
  .img_avatar {
    width: 64px;
    height: 64px;
  }

  .backColor {
    background-color: #ffffff;
  }

  .header {
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }

  .header_img {
    width: 17px;
    height: 30px;
  }

  .title {
    text-align: center;
    flex: 1;
    font-size: 30px;
    color: #ffff;
  }

  .save {
    font-size: 28px;
    color: #ffffff;
  }

  .base_message {
    box-sizing: border-box;
    padding: 0 30px;
    height: 98px;
    display: flex;
    position: relative;
    align-items: center;
    border-bottom: 1px solid rgb(239, 239, 239);
  }

  .avatar_file {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
  }

  .base_title {
    flex: 1;
    font-size: 28px;
    color: rgb(43, 43, 43);
    font-family: PingFangSC-Regular;
  }

  .base_img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
  }

  .base_value {
    font-size: 28px;
    color: rgb(153, 153, 153);
  }

  .sexPopup {
    box-sizing: border-box;
    padding: 8px 20px;
    width: 500px;
  }

  .sex-text {
    height: 88px;
    text-align: center;
    line-height: 88px;
    font-size: 28px;
    color: rgb(43, 43, 43);
  }

  .line {
    height: 1px;
    background-color: rgb(239, 239, 239);
  }

  .borderRadius {
    border-radius: 10px;
  }

  .pd_tb8 {
    padding-top: 16px;
    padding-bottom: 16px;
  }
</style>
